<template>
	<div class="home-container">
		<van-nav-bar class="page-nav-bar" fixed>
			<van-button class="search-btn" slot="title" type="info" size="small" round icon="search" to="/search">搜索
			</van-button>
		</van-nav-bar>

		<van-tabs class="channel-tabs" v-model="active" animated swipeable>
			<van-tab v-for="channel in channels" :key="channel.id" :title="channel.name">
				<ArticleList :channel="channel"></ArticleList>
			</van-tab>

			<div slot="nav-right" class="placeholder"></div>
			<div slot="nav-right" class="hamburger-btn" @click="isChannelEditShow = true">
				<i class="iconfont icon-gengduo"></i>
			</div>
		</van-tabs>

		<van-popup v-model="isChannelEditShow" closeable close-icon-position="top-left" position="bottom"
			:style="{ height: '90%' }">
			<van-cell title="编辑频道" class="header"></van-cell>
			<ChannelEdit :channels="channels" :active="active" @update-active="onUpdateActive"></ChannelEdit>
		</van-popup>
	</div>
</template>

<script>
	import {
		getUserChannels
	} from '@/api/user.js'

	import ArticleList from './components/article-list.vue'
	import ChannelEdit from './components/channel-edit.vue'
	import {
		mapState
	} from 'vuex'
	import {
		getItem
	} from '@/utils/storage.js'

	export default {
		components: {
			ArticleList,
			ChannelEdit
		},

		data() {
			return {
				active: 0,
				channels: [],
				isChannelEditShow: false
			}
		},
		created() {
			this.loadChannals()
		},
		computed: {
			...mapState(['user'])
		},

		methods: {
			async loadChannals() {
				try {
					let channels = []

					if (this.user) {
						const {
							data: res
						} = await getUserChannels()
						channels = res.data.channels
					} else {
						const localChannels = getItem('TOUTIAO_CHANNELS')
						if (localChannels) {
							channels = localChannels
						} else {
							const {
								data: res
							} = await getUserChannels()
							channels = res.data.channels
						}
					}
					this.channels = channels
				} catch (err) {
					this.$toast('获取频道数据失败')
				}

			},

			onUpdateActive(index, EditShow = true) {
				this.active = index
				this.isChannelEditShow = EditShow
			}
		},
	}
</script>

<style lang="less" scoped>
	.home-container {
		padding-bottom: 100px;
		padding-top: 174px;

		.search-btn {
			width: 555px;
			height: 64px;
			background-color: #5babfb;
			border: none;
			font-size: 28px;

			.van-icon {
				font-size: 32px;
			}
		}

		/deep/ .channel-tabs {
			.van-tabs__wrap {
				position: fixed;
				top: 92px;
				z-index: 999;
				left: 0;
				right: 0;
				height: 82px;
			}

			.van-tab {
				min-width: 200px;
				height: 82px;
				border-right: 1px solid #edeff3;
				font-size: 30px;
				color: #777;
			}

			.van-tab--active {
				color: #333;
			}

			.van-tabs__nav {
				padding-bottom: 0;
			}

			.van-tabs__line {
				width: 31px !important;
				height: 6px;
				background-color: #3296fa;
				bottom: 8px;
			}

			.placeholder {
				width: 66px;
				height: 82px;
				flex-shrink: 0;
			}

			.hamburger-btn {
				position: fixed;
				right: 0;
				width: 66px;
				height: 82px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				opacity: 0.92;

				i.iconfont {
					font-size: 33px;
				}

				&::before {
					content: '';
					position: absolute;
					left: 0;
					width: 1px;
					height: 100%;
					background-image: url(@/assets/gradient-gray-line.png);
					background-size: contain;
				}

			}
		}

		.header {
			.van-cell__title {
				text-align: center;
				font-size: 38px;
			}
		}
	}
</style>
